<template>
  <div id="app" class="createFlow">
    <div id="tab-component" class="tab-nav bottom-line">
      <div
        class="tab-item index1"
        :class="{ active: active == 0 }"
        @click="clickNav(0)"
      >
        发起提交
      </div>
      <div class="tab-item index2">&nbsp;</div>
      <div
        class="tab-item index3"
        :class="{ active: active == 1 }"
        @click="clickNav(1)"
      >
        查看数据
      </div>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" id="scroll-form">
          <div id="zm-form">
              <!-- <formTable></formTable> -->
             
          </div>
        </div>
        <div class="swiper-slide">
          <div class="createFlowList">
              <List></List>
          </div>
        </div>
      </div>
    </div>
     <SelectDep :data="sourceData" type="1" ></SelectDep>
  </div>
</template>
<script>
import Swiper from 'swiper'
import List from '@/components/zm-list/list'
import Form from "../../components/form"
import SelectDep from "@/components/selectDepartment/index"
import data from "@/assets/data"
let sourceData = data.slice();
export default {
  name: "App",
  components:{
    List,
    formTable:Form,
    SelectDep
  },
  data() {
    return {
      active: 0,
      sourceData:sourceData
    };
  },
  methods: {
    clickNav(index) {
      this.active = index;
    },
    getChildren(){
     
       return []
    }
  },
  watch: {
    active: function (v, o) {
      this.mySwiper.slideTo(v, 300, false);
    },
  },
  mounted() {
    console.log($commonApi,$api);
    this.mySwiper = new Swiper(".swiper-container", {
       
    });
    this.mySwiper.on("SlideChangeStart", (swiper)=>{
      this.active =  swiper.activeIndex;
    });
  },
};
</script>

<style lang="less"></style>
